<template>
  <div
    v-if="dateType != 4"
    u="flex text-12px text-#a9a9a9"
  >
    <div u="mr-10px text-#666">
      {{ state.text }}
    </div>
    <img
      v-if="state.color == 'green'"
      src="~@/assets/img/upArrow.png"
      alt=""
      u="w-2 h-10px"
    >
    <img
      v-else-if="state.color == 'red'"
      src="~@/assets/img/downArrow.png"
      u="w-2 h-10px"
      alt=""
    >
    <div
      v-else
      u-mr-1
    >
      -
    </div>
    <div :style="{ color: state.color }">
      {{ state.per }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  dateType: {
    type: Number,
    default: 5
  },
  rate: {
    type: Number,
    default: 0
  }
})

const { dateType, rate } = toRefs(props)

const getRate = n => {
  const _rate = ((n ?? 0) * 100).toFixed(2)
  return Math.abs(_rate) + '%'
}

const state = computed(() => {
  if (dateType.value == 4) {
    return {}
  }
  let text = ''
  let color = '#A9A9A9'
  const per = getRate(rate.value)
  const _rate = rate.value ?? 0
  if (_rate < 0) {
    color = 'red'
  } else if (_rate > 0) {
    color = 'green'
  }
  switch (dateType.value) {
    case 5:
      text = '较前7天'
      break
    case 6:
      text = '较前30天'
      break
    case 1:
      text = '较前一日'
      break
    case 3:
      text = '较前一月'
      break
    default:
      text = ''
  }
  return {
    text,
    color,
    per
  }
})
</script>
